<script setup lang='ts'>
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useGetBusinessLicenseInfo } from '@fl/api/man-api'

const id = defineModel<string>('id', { required: true })
const visible = defineModel<boolean>('visible', { required: true })

const { data: detail, isLoading } = useGetBusinessLicenseInfo(id)

function cancel() {
    visible.value = false
}
</script>

<template>
    <PlusDialog v-model="visible"
                title="营业执照详情"
                width="800"
                :has-footer="false"
                close-on-press-escape
                @cancel="cancel"
    >
        <ElSkeleton v-if="isLoading"
                    animated
        />

        <template v-else>
            <ElRow :gutter="20"
                   class="mb-20"
            >
                <ElCol :span="12">
                    <span>ID:</span>

                    <span>{{ detail?.id }}</span>
                </ElCol>

                <ElCol :span="12"
                       class="flex-items-start"
                >
                    <span class="w-70">企业logo:</span>

                    <el-image class="h-50 w-50"
                              :src="detail?.logo"
                              fit="cover"
                    >
                        <template #error>
                            <div class="h-100 w-100">
                                <el-icon><IconPicture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </ElCol>
            </ElRow>

            <ElRow :gutter="20"
                   class="mb-20"
            >
                <ElCol :span="12">
                    <span>公司名称:</span>

                    <span>{{ detail?.name }}</span>
                </ElCol>

                <!-- <ElCol :span="12">
                    <span>营业执照编码:</span>

                    <span>{{ detail?.businessLicenseNo }}</span>
                </ElCol> -->
                <ElCol :span="12">
                    <span>组织机构代码:</span>

                    <span>{{ detail?.organizationStructureCode }}</span>
                </ElCol>
            </ElRow>

            <ElRow :gutter="20"
                   class="mb-20"
            >
                <!-- <ElCol :span="12">
                    <span>组织机构代码:</span>

                    <span>{{ detail?.organizationStructureCode }}</span>
                </ElCol> -->

                <ElCol :span="12"
                       class="flex-items-start"
                >
                    <span class="w-70">营业执照:</span>

                    <el-image class="h-130 w-187"
                              :src="detail?.businessLicense"
                              fit="cover"
                    >
                        <template #error>
                            <div class="h-100 w-100">
                                <el-icon><IconPicture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </ElCol>

                <ElCol :span="12">
                    <span>注册地址:</span>

                    <span>{{ detail?.registeredAddress }}</span>
                </ElCol>
            </ElRow>

            <!-- <ElRow :gutter="20"
                   class="mb-20"
            >
                <ElCol :span="12">
                    <span>注册地址:</span>

                    <span>{{ detail?.registeredAddress }}</span>
                </ElCol>

                <ElCol :span="12">
                    <span>登记机构:</span>

                    <span>{{ detail?.registrationUthority }}</span>
                </ElCol>
            </ElRow> -->

            <ElRow :gutter="20"
                   class="mb-20"
            >
                <ElCol :span="12">
                    <span>社会信用代码:</span>

                    <span>{{ detail?.unifiedSocialCreditCode }}</span>
                </ElCol>

                <ElCol :span="12">
                    <span>法定代表人:</span>

                    <span>{{ detail?.legalRepresentative }}</span>
                </ElCol>
            </ElRow>

            <ElRow :gutter="20"
                   class="mb-20"
            >
                <ElCol :span="12">
                    <span>成立日期:</span>

                    <span>{{ detail?.establishmenDate }}</span>
                </ElCol>

                <ElCol :span="12">
                    <span>营业期限:</span>

                    <span>{{ detail?.businessPeriod }}</span>
                </ElCol>
            </ElRow>

            <ElRow :gutter="20"
                   class="mb-20"
            >
                <ElCol :span="12">
                    <span>注册资本:</span>

                    <span>{{ detail?.registeredCapital }}</span>
                </ElCol>

                <ElCol :span="12">
                    <span>状态:</span>

                    <span>{{ detail?.businessStatus }}</span>
                </ElCol>
            </ElRow>

            <ElRow :gutter="20"
                   class="mb-20"
            >
                <ElCol :span="12">
                    <span>类型:</span>

                    <span>{{ detail?.type }}</span>
                </ElCol>
            </ElRow>

            <ElRow class="mb-20">
                <ElCol :span="24">
                    <span>经营范围:</span>

                    <span>{{ detail?.businessScope }}</span>
                </ElCol>
            </ElRow>
        </template>
    </PlusDialog>
</template>

<style lang="less">
.flex-items-start {
    display: flex !important;
    align-items: flex-start;
}
</style>
